<script setup>


const leftClick = () => {
  uni.navigateBack()
}



const AiEduIndexItems = [
  {
    image: '/static/ai-edu/kindergarten.svg',
    title: '学前教育',
    content: '海量学前教育体系学习资料'
  },
  {
    image: '/static/ai-edu/elementary.svg',
    title: '小学教育',
    content: '海量小学教育体系学习资料'
  },
  {
    image: '/static/ai-edu/junior.svg',
    title: '初中育',
    content: '海量初中教育体系学习资料'
  },
  {
    image: '/static/ai-edu/high.svg',
    title: '高中教育',
    content: '海量高中教育体系学习资料'
  }
]
</script>
<template>
  <fui-nav-bar title="学校教育" @leftClick="leftClick" :isFixed="true" :isOccupy="true">
    <fui-icon name="arrowleft" :size="48"></fui-icon>
  </fui-nav-bar>
  <view class="AI-edu">
    <view class="sreach-box">
      <fui-icon name="search" :size="30" color="#999999"></fui-icon>
      <text>请输入需要搜索的课程</text>
    </view>

    <view class="edu-index" v-for="(item, index) in AiEduIndexItems" :key="index">
      <image class="image" :src="item.image" mode="scaleToFill" />
      <view class="index-content">
        <view class="title">{{ item.title }}</view>
        <view class="content">{{ item.content }}</view>
        <fui-button width="176rpx" height="74rpx" background="linear-gradient(302.79deg, #12868C 7.39%,
          #5DDAE0 71.89%, #A2FAFF 98.88%)" color="rgba(255, 255, 255, 1)" size="24" radius="200rpx">进入学习</fui-button>
      </view>
    </view>

  </view>
</template>
<style lang="scss" scoped>
.AI-edu {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .sreach-box {
    margin: 10rpx;
    width: 670rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      width: 80%;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .edu-index {
    width: 664rpx;
    height: 300rpx;
    border-radius: 40rpx;
    margin: 10rpx;
    background: linear-gradient(302.79deg, rgba(18, 134, 140, 0.1) 7.39%, rgba(93, 218, 224, 0.1) 71.89%, rgba(162, 250, 255, 0.1) 98.88%);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .image {
      width: 220rpx;
      height: 176rpx;
    }

    .index-content {
      width: 284rpx;
      height: 212rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: rgba(18, 134, 140, 1);
      }

      .content {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(18, 134, 140, 1);
      }
    }
  }
}
</style>